<!DOCTYPE html>
<html>
<head>
<title>jBox Demos</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">

<link rel="stylesheet" href="../jquery-jbox/2.3/Skins/Bootstrap/jbox.min.css">

<script src="../jquery/jquery-1.8.3.js"></script>

<header>
</header>

<body>
<div id="Tooltip-8" style="width:50px;">Click me</div>

<script src="../jquery-jbox/2.3/jquery.jBox-2.3.min.js"></script>
<script language="javascript">
$(document).ready(function() {


new jBox('Tooltip', {
  attach: '#Tooltip-8',
  theme: 'TooltipBorder',
  trigger: 'click',
  width: 200,
  height: ($(window).height() - 160),
  adjustTracker: true,
  closeOnClick: 'body',
  closeOnEsc: true,
  animation: 'move',
  position: {
    x: 'right',
    y: 'center'
  },
  outside: 'x',
  content: 'Scroll up and down or resize your browser, I will adjust my position!<br><br>Press [ESC] or click anywhere to close.',
  onOpen: function() {
    this.source.addClass('active').html('Now scroll');
  },
  onClose: function() {
    this.source.removeClass('active').html('Click me');
  }
});

});
</script>
<div style="max-height:100px;overflow-y:auto;"></div>
</body>
</html>